<template>
    <div style="width: 100%;">
        <!--查询条件-->
        <div class="Conditions">
            <div>
                <el-tag
                    v-if="docNameTag"
                    closable
                    @close="handleClose(1)"
                    style="height: 40px;width: auto;"
                >
                {{docName}}
                </el-tag>
                <el-input
                        class="input-new-tag"
                        v-if="nameInputVisible"
                        v-model="docName"
                        size="large"
                        ref="saveTagInput"
                        @keyup.enter.native="handleInputConfirm(1)"
                        @blur="handleInputConfirm(1)"
                        style="width: 140px;"
                >
                </el-input>
                <el-button v-if="nameInputTipVisible" class="button-new-tag" style="height: 40px;" @click="showTagInput(1)">+按姓名查询</el-button>
            </div>
            <div class="tagPos">
                <el-tag
                        v-if="deptNameTag"
                        closable
                        @close="handleClose(2)"
                        style="height: 40px;width: auto;"
                        type="success"
                >
                    {{deptName}}
                </el-tag>
                <el-select
                        v-model="deptID"
                        style="width: 150px;"
                        placeholder="所有科室"
                        v-if="deptInputVisible"
                        v-loading="dept_loading"
                        @change	="handleInputConfirm(2)">
                    <el-option
                            v-for="(item,index) in Depts"
                            :key="item.id"
                            :label="item.deptName"
                            :value="index">
                    </el-option>
                </el-select>
                <el-button type="success" v-if="deptInputTipVisible" class="button-new-tag" style="height: 40px;" @click="showTagInput(2)">+按科室查询</el-button>
            </div>
            <div class="tagPos">
                <el-tag
                        v-if="ruleNameTag"
                        closable
                        @close="handleClose(3)"
                        style="height: 40px;width: auto;"
                        type="info"
                >
                    {{ruleName}}
                </el-tag>
                <el-select
                        v-model="ruleID"
                        style="width: 150px;"
                        placeholder="所有科室"
                        v-if="ruleInputVisible"
                        v-loading="rule_loading"
                        type="info"
                        @change	="handleInputConfirm(3)">
                    <el-option
                            v-for="(item,index) in Rules"
                            :key="item.id"
                            :label="item.ruleName"
                            :value="index">
                    </el-option>
                </el-select>
                <el-button type="info" v-if="ruleInputTipVisible" class="button-new-tag" style="height: 40px;" @click="showTagInput(3)">+按方案查询</el-button>
            </div>
            <div class="tagPos">
                <el-button style="height: 40px;width: 80px;" @click="search">查询</el-button>
            </div>
        </div>
        <el-divider></el-divider>
        <!--医师排班表-->
        <div class="doc-rule">
            <el-table
                    :data="List.list"
                    style="width:1400px;margin:0 auto;"
                    v-loading="doc_rule_loading"
                    stripe
            >
                <el-table-column
                        label="医师姓名"
                        width="200"
                >
                    <template slot-scope="scope">
                        <i class="el-icon-s-custom"></i>
                        <span style="margin-left: 10px" v-if="scope.row.realName!=null">{{ scope.row.realName }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="登录账号"
                        width="220"
                >
                    <template slot-scope="scope">
                        <i class="el-icon-s-promotion"></i>
                        <span style="margin-left: 10px" v-if="scope.row.userName!=null">{{ scope.row.userName }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="所属科室"
                        width="220">
                    <template slot-scope="scope">
                        <i class="el-icon-s-home"></i>
                        <span style="margin-left: 10px">{{ scope.row.dept.deptName }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="科室代码"
                        width="200">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.dept.deptCode}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="排班方案"
                        width="180">
                    <template slot-scope="scope" v-if="scope.row.rule.ruleName != null">
                        <el-tag size="medium">{{ scope.row.rule.ruleName }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                        label="是否执行"
                        width="180">
                    <template slot-scope="scope" v-if="scope.row.isScheduling">
                        <el-tag v-if="scope.row.isScheduling == '是'" type="success" size="medium">{{ scope.row.isScheduling }}</el-tag>
                        <el-tag v-else type="danger" size="medium">{{ scope.row.isScheduling }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button
                                size="large"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--排班表-->
        <div class="choose">
            <el-pagination
                    :hide-on-single-page="false"
                    :page-count="List.pages"
                    :page-size="List.pageSize"
                    background
                    :current-page.sync="pageNum"
                    layout="prev, pager, next,total"
                    v-loading="doc_rule_loading"
                    @current-change="handlePageNumChange"
                    prev-text="上一页"
                    next-text="下一页"
                    style="margin: 0 auto;display: inline-block">
            </el-pagination>
        </div>
        <el-dialog
                title="更改排班"
                :visible.sync="dialogVisible"
                width="20%"
                :before-close="handleClose"
                v-if="currentRow!=null && currentRow!=''">
            <div class="diaClass">
                <div>
                    <el-form>
                        <el-form-item label="医生姓名">
                            <el-input v-model="newDocName" style="width: 250px" :placeholder="currentRow.realName"></el-input>
                        </el-form-item>
                        <el-form-item label="登录名　">
                            <el-input v-model="newUserName" style="width: 250px" :placeholder="currentRow.userName"></el-input>
                        </el-form-item>
                        <el-form-item label="所属科室">
                            <el-select
                                    v-model="oldDeptID"
                                    style="width: 250px;"
                                    placeholder="所有科室"
                                    v-loading="dept_loading">
                                <el-option
                                        v-for="item in Depts"
                                        :key="item.id"
                                        :label="item.deptName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="执行方案">
                            <el-select v-model="oldRuleID" style="width: 250px;" placeholder="所有" v-loading="rule_loading">
                                <el-option
                                        v-for="item in Rules"
                                        :key="item.id"
                                        :label="item.ruleName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="是否执行">
                            <el-switch
                                    style="margin-left: 4px"
                                    v-model="runningSwitch"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-text="是"
                                    inactive-text="否">
                            </el-switch>
                        </el-form-item>

                    </el-form>
                </div>
                <div>

                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeRule()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "rule",
        data() {
            return {
                List: [],
                Depts: [],
                Rules: [],
                dialogVisible: false,
                currentRow: '',
                doc_rule_loading: true,
                dept_loading: true,
                rule_loading: true,
                currentRule: '',
                deptID: 0,
                ruleID: 0,
                docName: '',
                oldRuleID: '',
                oldDeptID:'',
                pageNum: 1,
                pageSize: 5,
                nameInputVisible:false,
                nameInputTipVisible:true,
                docNameTag:false,
                deptName:'',
                deptInputVisible:false,
                deptInputTipVisible:true,
                deptNameTag:false,
                ruleName:'',
                ruleInputVisible:false,
                ruleInputTipVisible:true,
                ruleNameTag:false,
                runningSwitch:false,
                newUserName:'',
                newDocName:'',
            }
        },
        mounted: function () {
            this.InitMethod();
            this.InitDept();
            this.InitRule();
        },
        created: {},
        methods: {
            InitMethod() {
                let params = "?";
                params += "&deptID=" + this.deptID;
                params += "&ruleID=" + this.ruleID;
                params += "&realName=" + this.docName;
                params += "&pageNum=" + this.pageNum;
                params += "&pageSize=" + this.pageSize;
                let url = `http://localhost:8082/schedul/multiQ` + params;
                // alert(url)
                this.$ajax.get(url).then(res => {
                    this.List = res.data;
                    this.doc_rule_loading = false;
                });
            },
            InitDept() {
                let url = `http://localhost:8082/dept/all`;
                this.$ajax.get(url).then(res => {
                    this.Depts = res.data;
                    this.dept_loading = false;
                });
            },
            InitRule() {
                let url = `http://localhost:8082/rule/all`;
                this.$ajax.get(url).then(res => {
                    this.Rules = res.data;
                    this.rule_loading = false;
                });
            },
            handleEdit(index, row) {
                this.currentRow = row;
                this.dialogVisible = true;
                this.oldRuleID = row.rule.id;
                this.oldDeptID=row.dept.id;
                this.newUserName='';
                this.newDocName='';
                if(row.isScheduling == "是"){
                    this.runningSwitch=true;
                }else{
                    this.runningSwitch=false;
                }
            },
            handleClose(done) {
                this.dialogVisible=false;
            },
            changeRule() {
                this.dialogVisible = false;
                let params="?ID="+this.currentRow.id;
                if(this.newUserName != ''){
                    params += "&userName="+this.newUserName;
                }
                if(this.newDocName != ''){
                    params += "&realName="+this.newDocName;
                }
                params += "&deptID="+this.oldDeptID;
                params += "&ruleID=" + this.oldRuleID;
                if(this.runningSwitch){
                    params += "&isScheduling=是";
                }else{
                    params += "&isScheduling=否";
                }
                let url = `http://localhost:8082/schedul/change`+params;
                // alert(url)
                this.$ajax.get(url).then(res => {
                    if (res.data == "0") {
                        this.$notify.success({
                            title: '通知',
                            message: '保存成功',
                            showClose: false
                        });
                        this.dialogVisible = false;
                        this.InitMethod();
                    } else {
                        this.$notify.error({
                            title: '通知',
                            message: '请重试',
                            showClose: false
                        });
                    }
                });
            },
            handlePageNumChange() {
                this.InitMethod();
            },
            search() {
                this.pageNum=1;
                this.InitMethod();
            },
            handleInputConfirm(op){
                if(op==1){
                    if(this.docName==''){
                        this.nameInputVisible=false;
                        this.nameInputTipVisible=true;
                        this.docNameTag=false;
                    }else{
                        this.nameInputVisible=false;
                        this.nameInputTipVisible=false;
                        this.docNameTag=true;
                    }
                }else if(op==2){
                    this.deptInputVisible=false;
                    this.deptInputTipVisible=false;
                    this.deptNameTag=true;
                    this.deptName=this.Depts[this.deptID].deptName;
                    this.deptID=this.Depts[this.deptID].id;
                }else if(op==3){
                    this.ruleInputVisible=false;
                    this.ruleInputTipVisible=false;
                    this.ruleNameTag=true;
                    this.ruleName=this.Rules[this.ruleID].ruleName;
                    this.ruleID=this.Rules[this.ruleID].id;
                }
            },
            showTagInput(op){
                if(op==1){
                    this.nameInputVisible=true;
                    this.nameInputTipVisible=false;
                    this.$nextTick(_ => {
                        this.$refs.saveTagInput.$refs.input.focus();
                    });
                }
                else if(op==2){
                    this.deptInputVisible=true;
                    this.deptInputTipVisible=false;
                }else if(op==3){
                    this.ruleInputVisible=true;
                    this.ruleInputTipVisible=false;
                }
            },
            handleClose(op){
                if(op==1){
                    this.docName='';
                    this.nameInputVisible=false;
                    this.nameInputTipVisible=true;
                    this.docNameTag=false;
                }else if(op==2){
                    this.deptInputVisible=false;
                    this.deptInputTipVisible=true;
                    this.deptNameTag=false;
                    this.deptID=0;
                }else if(op==3){
                    this.ruleInputVisible=false;
                    this.ruleInputTipVisible=true;
                    this.ruleNameTag=false;
                    this.ruleName='';
                    this.ruleID=0;
                }
            }
        },
    }
</script>

<style scoped>
    .tagPos{
        margin-left: 50px;
    }
    .doc-rule {
        width: 100%;
        height: auto;
        margin-top: 20px;
    }

    .Conditions {
        width: 100%;
        height: auto;
        margin: 20px auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 22px;
    }

    .Conditions span {
        line-height: 40px;
    }

    .choose {
        width: 40%;
        height: auto;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .diaClass {

    }
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>